<template>
  <view class="setting-page">
    <!-- 应用信息分组 -->
    <view class="group">
      <text class="group-title">应用信息</text>
      <view class="setting-item">
        <image class="item-icon" src="/static/version.svg"></image>
        <view class="item-label">当前版本</view>
        <view class="item-value">0.1.5</view>
      </view>
    </view>
	
	<view class="group">
	<!-- 修改密码 -->
	<text class="group-title">应用信息</text>
	 <view class="setting-item nav-item" @click="openModifyPasswordPopup">
	      <image class="item-icon" src="/static/charge-password.svg"></image>
	      <view class="item-label">修改密码</view>
	      <image class="arrow" src="/static/right.svg"></image>
	</view>
	</view>

    <!-- 帮助与支持分组 -->
    <view class="group">
      <text class="group-title">帮助与支持</text>
      <navigator url="/pages/set/note">
        <view class="setting-item nav-item">
          <image class="item-icon" src="/static/disclaimer.svg"></image>
          <view class="item-label">免责声明</view>
          <image class="arrow" src="/static/right.svg"></image>
        </view>
      </navigator>
    </view>

    <!-- 存储与数据分组 -->
    <view class="group">
      <text class="group-title">存储与数据</text>
      <view class="setting-item" @tap="clearCache">
        <image class="item-icon" src="/static/Clean-up-cache.svg"></image>
        <view class="item-label">清除缓存</view>
        <view class="item-value" v-if="cacheSize">
          {{ cacheSize }}
        </view>
        <view class="item-value" v-else>
          点击清除
        </view>
      </view>
    </view>

     <button class="logout-btn" @tap="showLogoutModal">
         <image class="logout-loading" v-if="isLogoutLoading" src="/static/loading.png"></image>
         退出登录
       </button>
	<uni-popup ref="logoutDialog" type="dialog">
      <view class="logout-dialog">
        <view class="dialog-body">
          <text class="dialog-text">确定要退出登录吗？</text>
        </view>
        <view class="button-group">
			<button class="confirm-btn" @click="confirmLogout">确定</button>
          <button class="cancel-btn" @click="closeLogoutDialog">取消</button>
        </view>
      </view>
    </uni-popup>

    <!-- 引入修改密码弹窗组件 -->
    <ModifyPasswordPopup ref="modifyPasswordPopup" />
  </view>
</template>

<script>
import ModifyPasswordPopup from '@/uni_modules/uni-popup/components/ModifyPasswordPopup.vue'; 

export default {
  components: {
    ModifyPasswordPopup
  },
  data() {
    return {
      cacheSize: '', // 缓存大小
      isLogoutLoading: false // 退出登录加载状态
    }
  },
  onLoad() {
    this.getCacheSize()
  },
  methods: {
    // 打开修改密码弹窗
    openModifyPasswordPopup() {
      this.$refs.modifyPasswordPopup.open();
    },
    // 获取缓存大小
    getCacheSize() {
      const storageInfo = uni.getStorageInfoSync()
      const size = storageInfo.currentSize
      this.cacheSize = size > 0? `${(size / 1024).toFixed(2)}KB` : ''
    },
    // 清除缓存
    clearCache() {
      uni.clearStorageSync()
      uni.showToast({
        title: '缓存已清除',
        icon: 'none'
      })
      this.getCacheSize()
    },
    // 显示退出登录确认弹窗
    showLogoutModal() {
      this.$refs.logoutDialog.open();
    },
    
    // 关闭退出登录确认弹窗
    closeLogoutDialog() {
      this.$refs.logoutDialog.close();
    },
    
    // 确认退出登录
    async confirmLogout() {
      this.isLogoutLoading = true;
      this.closeLogoutDialog();
      
    }
  }
}
</script>

<style scoped>
/* 页面基础样式 */
.setting-page {
  background-color: #f5f5f5;
  padding: 15rpx;
}

/* 分组标题样式 */
.group-title {
  font-size: 28rpx;
  color: #999;
  margin: 20rpx 0 10rpx 10rpx;
  display: block; /* 让标题独占一行 */
}

/* 列表项容器 */
.setting-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  justify-content: space-between;
}

/* 图标样式统一 */
.item-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 15rpx;
}

/* 文字标签样式 */
.item-label {
  font-size: 32rpx;
  color: #333;
  flex: 1; /* 让文字占据中间空间 */
}

/* 右侧文字样式 */
.item-value {
  font-size: 30rpx;
  color: #999;
}

/* 带箭头的列表项（修改密码、免责声明） */
.nav-item {
  justify-content: space-between;
}

/* 箭头图标 */
.arrow {
  width: 40rpx;
  height: 40rpx;
}

/* 退出登录按钮 */
.logout-btn {
  background-color: #fff;
  color: #f00;
  font-size: 32rpx;
  margin-top: 30rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90rpx;
}

/* 退出登录加载图标 */
.logout-loading {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
  animation: rotate 1s linear infinite;
}

/* 加载动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 退出登录弹窗样式 */
.logout-dialog {
  width: 85vw;
  max-width: 400px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;
}
  .button-group{
	  display: flex;
	  justify-content: space-between;
  }
.confirm-btn,.cancel-btn{
	width: 45%;
}

.dialog-body {
  padding: 30px 20px;
  text-align: center;
}

.dialog-text {
  font-size: 20px;
  color: #333;
}
</style>